import { memo } from "react";
import ProductDetailHeadStyle from "./style";
import { Divider, Image } from "antd-mobile";
import { ProductType } from "../../../../types/product";

const ProductDetail = memo((props: { data: ProductType }) => {
  const { data } = props;

  return (
    <ProductDetailHeadStyle>
      <div className="cover">
        <Image src={data?.cover} fit="cover" />
      </div>
      <Divider />
      <div className="info-wrap">
        <div className="name">{data?.name}</div>
        <div className="desc">{data?.desc}</div>
      </div>
      <Divider />
      <div className="sell-info">
        <div className="curStock">库存：{data?.stock - data?.sellNum}</div>
        <div className="limitBuyNum">限购：{data?.limitBuyNum}</div>
        <div className="sellNum">已售：{data?.sellNum}</div>
      </div>
    </ProductDetailHeadStyle>
  );
});

export default ProductDetail;
